<template>
  <div class="container">
    <!-- <el-row class="tipBar">
      <el-col class="tip" :lg="16" :md="16" :sm="16" :xs="15">
        <i class="icon iconfont iconfanhui1" @click="goBack"></i>用户管理
      </el-col>
    </el-row> -->
    <topTitle :titleText="`用户管理`"></topTitle>
    <div class="mainCon">
      <div
        class="operation fr"
        @click="modifyFlag = true"
        style="margin-top: 5px"
        v-if="option === 1 && modifyFlag === false"
      >
        编辑账号
      </div>
      <div
        class="operation fr"
        @click="modifyFlag = true"
        style="margin-top: 5px"
        v-if="option === 2 && modifyFlag === false"
      >
        编辑资料
      </div>
      <div
        class="operation fr"
        @click="addUserRoleDialogVisible = true"
        style="margin-top: 5px"
        v-if="option === 3"
      >
        添加角色
      </div>
      <div class="options" v-show="option !== 0">
        <div @click="changeOption(1)">
          <div
            :style="{
              marginRight: '40px',
              color: option === 1 ? '#009588' : '#666',
            }"
          >
            用户账号
          </div>
          <div
            class="greenLine"
            :style="{ opacity: option === 1 ? '1' : '0' }"
          ></div>
        </div>
        <div @click="changeOption(2)">
          <div
            :style="{
              marginRight: '40px',
              color: option === 2 || option === 2.5 ? '#009588' : '#666',
            }"
          >
            用户资料
          </div>
          <div
            class="greenLine"
            :style="{ opacity: option === 2 || option === 2.5 ? '1' : '0' }"
          ></div>
        </div>
        <div @click="changeOption(3)">
          <div
            :style="{
              marginRight: '40px',
              color: option === 3 ? '#009588' : '#666',
            }"
          >
            用户角色
          </div>
          <div
            class="greenLine"
            :style="{ opacity: option === 3 ? '1' : '0' }"
          ></div>
        </div>
      </div>
      <el-form
        :model="formAccount"
        :rules="modifyFlag === false ? null : formAccountRules"
        ref="formAccount"
        label-width="100px"
        class="form"
        v-if="option === 0 || option === 1"
      >
        <el-form-item
          prop="userName"
          :label="'用户名'.concat(this.modifyFlag === false ? '：' : '')"
          class="addUserForm"
        >
          <div v-if="modifyFlag === false">
            {{ formatTd(0, 0, formAccount.userName) }}
          </div>
          <el-input
            v-model.trim="formAccount.userName"
            clearable
            placeholder="请输入用户名"
            class="input"
            v-else
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="password"
          :label="'登录密码'.concat(this.modifyFlag === false ? '：' : '')"
          class="addUserForm"
        >
          <div v-if="modifyFlag === false">
            {{ formAccount.password ? '********************' : '--' }}
          </div>
          <el-input
            v-model.trim="formAccount.password"
            clearable
            placeholder="请输入登录密码"
            class="input"
            v-else
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="type"
          :label="'用户类型'.concat(this.modifyFlag === false ? '：' : '')"
          class="addUserForm"
        >
          <div v-if="modifyFlag === false">
            {{ formatTd(0, 0, formAccount.type) }}
          </div>
          <el-select
            v-model="formAccount.type"
            clearable
            filterable
            placeholder="请选择用户类型"
            class="input"
            v-else
          >
            <el-option
              v-for="item in rangeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="status"
          :label="'用户状态'.concat(this.modifyFlag === false ? '：' : '')"
          class="addUserForm"
        >
          <div v-if="modifyFlag === false">
            {{ formatTd(0, 0, formAccount.status) }}
          </div>
          <el-select
            v-model="formAccount.status"
            clearable
            filterable
            placeholder="请选择用户状态"
            class="input"
            v-else
          >
            <el-option
              v-for="item in rangeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="area"
          :label="'行政区划'.concat(this.modifyFlag === false ? '：' : '')"
          class="addUserForm"
        >
          <div v-if="modifyFlag === false">
            {{ formatTd(0, 0, formAccount.area) }}
          </div>
          <el-select
            v-model="formAccount.area"
            clearable
            filterable
            placeholder="请选择行政区划"
            class="input"
            v-else
          >
            <el-option
              v-for="item in rangeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="industry"
          :label="'主管行业'.concat(this.modifyFlag === false ? '：' : '')"
          class="addUserForm"
        >
          <div v-if="modifyFlag === false">
            {{ formatTd(0, 0, formAccount.industry) }}
          </div>
          <el-select
            v-model="formAccount.industry"
            clearable
            filterable
            placeholder="请选择主管行业"
            class="input"
            v-else
          >
            <el-option
              v-for="item in rangeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="modifyFlag === true">
          <el-button
            class="operation"
            type="primary"
            @click="saveFormAccount"
            :loading="isSaveLoading"
            style="padding: 7px 20px 7px 20px"
          >
            保存
          </el-button>
          <el-button
            class="operation"
            type="primary"
            @click="cancelSaveForm('formAccount', formAccountRules)"
            style="padding: 7px 20px 7px 20px; background: white; color: #333"
            v-if="option === 1"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
      <el-form
        :model="formInfo"
        :rules="modifyFlag === false ? null : formInfoRules"
        ref="formInfo"
        label-width="100px"
        class="form"
        v-if="option === 2 || option === 2.5"
      >
        <el-form-item
          prop="name"
          :label="'姓名'.concat(this.modifyFlag === false ? '：' : '')"
          class="addUserForm"
        >
          <div v-if="modifyFlag === false">
            {{ formatTd(0, 0, formInfo.name) }}
          </div>
          <el-input
            v-model.trim="formInfo.name"
            clearable
            placeholder="请输入"
            class="input"
            v-else
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="sex"
          :label="'性别'.concat(this.modifyFlag === false ? '：' : '')"
          class="addUserForm"
        >
          <div v-if="modifyFlag === false">
            {{ formatTd(0, 0, formInfo.sex) }}
          </div>
          <el-select
            v-model="formInfo.sex"
            clearable
            filterable
            placeholder="请选择"
            class="input"
            v-else
          >
            <el-option
              v-for="item in rangeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="department"
          :label="'所属部门'.concat(this.modifyFlag === false ? '：' : '')"
          class="addUserForm"
        >
          <div v-if="modifyFlag === false">
            {{ formatTd(0, 0, formInfo.department) }}
          </div>
          <el-select
            v-model="formInfo.department"
            clearable
            filterable
            placeholder="请选择"
            class="input"
            v-else
          >
            <el-option
              v-for="item in rangeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="post"
          :label="'岗位'.concat(this.modifyFlag === false ? '：' : '')"
          class="addUserForm"
        >
          <div v-if="modifyFlag === false">
            {{ formatTd(0, 0, formInfo.post) }}
          </div>
          <el-input
            v-model.trim="formInfo.post"
            clearable
            placeholder="请输入"
            class="input"
            v-else
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="phoneNumber"
          :label="'手机号'.concat(this.modifyFlag === false ? '：' : '')"
          class="addUserForm"
        >
          <div v-if="modifyFlag === false">
            {{ formatTd(0, 0, formInfo.phoneNumber) }}
          </div>
          <el-input
            v-model.trim="formInfo.phoneNumber"
            clearable
            placeholder="请输入"
            class="input"
            v-else
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="email"
          :label="'邮箱'.concat(this.modifyFlag === false ? '：' : '')"
          class="addUserForm"
        >
          <div v-if="modifyFlag === false">
            {{ formatTd(0, 0, formInfo.email) }}
          </div>
          <el-input
            v-model.trim="formInfo.email"
            clearable
            placeholder="请输入"
            class="input"
            v-else
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="IDNumber"
          :label="'身份证号'.concat(this.modifyFlag === false ? '：' : '')"
          class="addUserForm"
        >
          <div v-if="modifyFlag === false">
            {{ formatTd(0, 0, formInfo.IDNumber) }}
          </div>
          <el-input
            v-model.trim="formInfo.IDNumber"
            clearable
            placeholder="请输入"
            class="input"
            v-else
          ></el-input>
        </el-form-item>
        <el-form-item v-if="modifyFlag === true">
          <el-button
            class="operation"
            type="primary"
            @click="saveFormInfo"
            :loading="isSaveLoading"
            style="padding: 7px 20px 7px 20px"
            >保存</el-button
          >
          <el-button
            class="operation"
            type="primary"
            @click="cancelSaveForm('formInfo', formInfoRules)"
            style="padding: 7px 20px 7px 20px; background: white; color: #333"
            v-if="option === 2"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        :data="tableList"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        v-loading="loading"
        stripe
        style="border: 1px solid #dfe6ec; margin-top: 30px"
        v-if="option === 3"
      >
        <el-table-column
          prop="projectName"
          label="角色名称"
          align="center"
          :formatter="formatTd"
          min-width="25%"
        ></el-table-column>
        <el-table-column
          prop="projectName"
          label="角色ID"
          align="center"
          :formatter="formatTd"
          min-width="25%"
        ></el-table-column>
        <el-table-column
          prop="projectName"
          label="角色介绍"
          align="center"
          :formatter="formatTd"
          min-width="25%"
        ></el-table-column>

        <el-table-column
          label="操作"
          align="center"
          :formatter="formatTd"
          min-width="25%"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="deleteUserRole(scope.row.id)"
              >删除</el-link
            >
          </template>
        </el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关信息"></emptyTable>
        </div>
      </el-table>
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
        v-if="option === 3"
      ></Pagination>
      <el-dialog
        title="增加角色"
        :visible.sync="addUserRoleDialogVisible"
        @close="closeDialog('addUserRole')"
        :modal-append-to-body="false"
        :append-to-body="true"
      >
        <el-form
          :model="addUserRoleForm"
          :rules="addUserRoleRule"
          ref="addUserRole"
        >
          <el-form-item prop="userRoleArray">
            <el-checkbox-group
              v-model="addUserRoleForm.userRoleArray"
              :class="
                this.unselectedFlag
                  ? 'unselected checkBoxGroup'
                  : 'checkBoxGroup'
              "
            >
              <el-checkbox
                :label="item.id"
                v-for="(item, index) in userRoles"
                :key="index"
                class="checkbox"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <div style="text-align: right">
            <el-button
              @click.native="cancel('addUserRole')"
              class="commonBut cancelBtn"
              >取消</el-button
            >
            <el-button
              type="primary"
              @click.native="saveUserRole"
              class="commonBut saveBtn"
              >保存</el-button
            >
          </div>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
//这个页面没有用到
export default {
  name: 'userManagerDetail',

  data() {
    var validateUserRole = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请选择角色'))
        this.unselectedFlag = true
      } else {
        callback()
        this.unselectedFlag = false
      }
    }
    return {
      option: 0,
      modifyFlag: true,
      isSaveLoading: false,
      loading: true,
      isShow: false,
      formAccount: {
        userName: '',
        password: '',
        type: '',
        status: '',
        area: '',
        industry: '',
      },
      formInfo: {
        name: '',
        sex: '',
        department: '',
        post: '',
        phoneNumber: '',
        email: '',
        IDNumber: '',
      },
      formAccountRules: {
        userName: {
          required: true,
          message: '请输入用户名',
          trigger: 'blur',
        },
        password: {
          required: true,
          message: '请输入登录密码',
          trigger: 'blur',
        },
        type: {
          required: true,
          message: '请选择用户类型',
          trigger: 'change',
        },
        status: {
          required: true,
          message: '请选择用户状态',
          trigger: 'change',
        },
        area: {
          required: true,
          message: '请选择行政区划',
          trigger: 'change',
        },
        industry: {
          required: true,
          message: '请选择主管行业',
          trigger: 'change',
        },
      },
      formInfoRules: {
        name: {
          required: true,
          message: '请输入姓名',
          trigger: 'blur',
        },
        department: {
          required: true,
          message: '请选择所属部门',
          trigger: 'change',
        },
      },
      rangeList: [
        {
          name: 1,
          code: 1,
        },
      ],
      tableList: [],
      filterField: {
        id: '',
      },
      unselectedFlag: false,
      addUserRoleRule: {
        userRoleArray: [
          {
            required: true,
            validator: validateUserRole,
            trigger: 'change',
          },
        ],
      },
      addUserRoleForm: {
        userRoleArray: [],
        id: '',
      },
      userRoles: [
        {
          id: 1,
          name: '角色名称5',
        },
        {
          id: 2,
          name: '角色名称6',
        },
        {
          id: 3,
          name: '角色名称5',
        },
        {
          id: 4,
          name: '角色asdsad名称6',
        },
        {
          id: 5,
          name: '角色名称5',
        },
        {
          id: 6,
          name: '角色名称6',
        },
      ],
      requestUrl: '',
      addUserRoleDialogVisible: false,
    }
  },
  created() {
    if (Object.keys(this.$route.query).length > 0) {
      var {
        option,
        id,
        userName,
        type,
        status,
        name,
        phoneNumber,
        department,
      } = this.$route.query
      this.option = Number(option)
      if (option !== 0) {
        this.formAccount.id = id
        this.formAccount.userName = userName
        this.formAccount.type = type
        this.formAccount.status = status
        this.formInfo.id = id
        this.formInfo.name = name
        this.formInfo.phoneNumber = phoneNumber
        this.formInfo.department = department
        this.modifyFlag = false
        this.requestUrl = 'api-a/cs/alert/expand/monitor/listbypage'
        if (option === 3) {
          var that = this
          this.filterField.id = this.$route.query.id
          this.$nextTick(function () {
            that.$refs.pagination.getTableListData()
          })
        }
      }
    }
  },
  methods: {
    goBack() {
      this.$router.push({
        path: '/home/baseSettings/userManager',
        name: 'userManager',
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/userManager',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //防止切换option时留存红色提示字
    resetValidator(formName, rules) {
      return Object.values(rules).map((item) => {
        return (item.required = false)
      })
      this.$refs[formName].validate()
      return Object.values(rules).map((item) => {
        return (item.required = true)
      })
    },
    changeOption(e) {
      switch (e) {
        case 1: //修改用户账号
          if (this.option !== 3) {
            this.resetValidator('formInfo', this.formInfoRules)
          }
          this.option = e
          this.modifyFlag = false
          break
        case 2:
          if (this.option !== 3) {
            this.resetValidator('formAccount', this.formAccountRules)
          }
          if (!this.formInfo.name) {
            this.option = 2.5 //新增用户资料
            this.modifyFlag = true
          } else {
            this.option = e
            //修改用户资料
            this.modifyFlag = false
          }

          break
        case 3: //新增用户账号
          this.option = e
          this.modifyFlag = false
          var that = this
          this.$nextTick(function () {
            that.$refs.pagination.getTableListData()
          })
          break
        default:
          break
      }
    },
    cancelSaveForm(formName, rules) {
      this.modifyFlag = false
      this.resetValidator(formName, rules)
      //   this.$refs[formName].resetFields();
    },
    deleteUserRole(id) {
      this.$message({
        message: '删除成功',
        type: 'success',
      })
    },
    saveUserRole() {
      this.$refs['addUserRole'].validate((valid) => {
        if (valid) {
          this.addUserRoleForm.id = this.filterField.id
          this.$message({
            message: '保存成功',
            type: 'success',
          })
          this.addUserRoleDialogVisible = false
        }
      })
    },
    //关闭弹窗
    closeDialog(ele) {
      this.$refs[ele].resetFields()
      this.unselectedFlag = false
    },
    // 弹框的取消功能
    cancel(ele) {
      this.$refs[ele].resetFields()
      if (ele == 'addUserRole') {
        this.addUserRoleDialogVisible = false
      }
    },
    saveFormAccount() {
      this.$refs.formAccount.validate((valid) => {
        if (valid) {
          this.$message({
            message: '保存成功',
            type: 'success',
          })
          this.option = 1
          this.modifyFlag = false
        } else {
          return false
        }
      })
    },
    saveFormInfo() {
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          this.$message({
            message: '保存成功',
            type: 'success',
          })
          this.option = 2
          this.modifyFlag = false
        } else {
          return false
        }
      })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
  },
}
</script>

<style scoped lang="less">
.tipBar {
  position: relative;
  z-index: 1;
  height: 54px;
  background-color: #fff;
  font: bold 18px/54px Microsoft YaHei;
  padding: 0 24px;
  .tip {
    line-height: 54px;
    font-weight: bold;
    border-bottom: 1px solid #e3e7e9;
  }
}
.mainCon {
  margin-top: 40px;
  .options {
    width: 80%;
    line-height: 27px;
    font-size: 16px;
    color: #666;
    margin-left: 20px;
    margin-bottom: 60px;
    > div {
      float: left;
      cursor: pointer;
    }
    .greenLine {
      position: relative;
      top: 5px;
      width: 63%;
      height: 2px;
      background: #009588;
      border-radius: 1px;
    }
  }
  .form {
    margin-top: 3%;
    width: 90%;
    .addUserForm {
      display: inline-block;
      width: 40%;
    }
    .input {
      width: 90%;
      height: 45px;
      font: 14px SourceHanSansCN-Medium;
    }
  }
  .operation {
    padding: 8px 12px 8px 12px;
    border-radius: 5px;
    background: rgb(0, 174, 255);
    color: white;
    font: 14px SourceHanSansCN-Medium;
    cursor: pointer;
  }
  .unselected {
    border: solid 1px #f56c6c;
    border-radius: 5px;
  }
  .checkBoxGroup {
    .checkbox {
      width: 23%;
      margin-left: 5%;
    }
  }
}
</style>
